<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="vendors/msui/css/msui.css" />
  <link rel="stylesheet" href="assets/css/main.css">
  <link rel="stylesheet" href="assets/css/app-nav.css">
  <link rel="stylesheet" href="assets/css/system-watch.css">
  <link rel="stylesheet" href="assets/css/system-analysis.css">

  <script type="text/javascript" src="vendors/jquery/jquery.min.js"></script>
  <script type="text/javascript" src="vendors/msui/js/msui.min.js"></script>
  <script type="text/javascript" src="vendors/echarts.js"></script>
  <script type="text/javascript" src="assets/js/app-nav.js"></script>
  <script type="text/javascript" src="assets/js/system-analysis.js"></script>
  <!--<script type="text/javascript" src="assets/js/system-watch.js"></script>-->
</head>

<body>
<div class="app-nav">
</div>
<div class="app-wrapper">

  <div class="ms-tabs" data-ms-tabs>
    <ul class="ms-tabs-nav ms-nav ms-nav-tabs">
      <li class="ms-active"><a href="#tab1">同比分析</a></li>
      <li><a href="#tab2">环比分析</a></li>
      <li><a href="#tab3">对比分析</a></li>
      <li><a href="#tab4">能效分析</a></li>
    </ul>

    <div class="ms-tabs-bd ms-tabs-bd-ofv">
      <div class="ms-tab-panel ms-fade ms-in ms-active" id="tab1">

        <div class="ms-g">
          <div >
            <p class="sys-choose">区域：
              <select id="js-selected" data-ms-selected>
                <option value="a" selected>图书馆</option>
                <option value="b">宿舍区1</option>
                <option value="d">宿舍区2</option>
                <option value="o">办公区</option>
                <option value="m">实验室</option>
              </select>
              楼层 ：
              <select data-ms-selected>
                <option value="a" selected>A1</option>
                <option value="b">A2</option>
                <option value="c">A3</option>
                <option value="d">A4</option>
                <option value="a">A5</option>
                <option value="b">A6</option>
                <option value="c">A7</option>
                <option value="d">A8</option>
              </select>
              房间 ：
              <select data-ms-selected>
                <option value="a" selected>A1-101</option>
                <option value="b" >A1-102</option>
                <option value="c">A1-103</option>
                <option value="d">A1-104</option>
                <option value="a">A1-105</option>
                <option value="b">A1-106</option>
                <option value="c">A1-107</option>
                <option value="d">A1-108</option>
              </select>
              系统 ：
              <select data-ms-selected>
                <option value="a" selected>照明系统</option>
                <option value="b" >空调系统</option>
              </select>
            </p>
            <div id="js-selected-info"></div>
          </div>

        </div>

        <div class="time">
          <form action="" class="ms-form ms-form-inline ">
            时间段：
            <div class="ms-form-group ms-form-icon ">
              <i class="ms-icon-calendar"></i>
              <input type="text" class="ms-form-field ms-datepicker-date" placeholder="始">
            </div>
            <div class="ms-form-group ms-form-icon ">
              <i class="ms-icon-calendar"></i>
              <input type="text" class="ms-form-field ms-datepicker-date" placeholder="终">
            </div>
            <button type="button" class="ms-btn ms-btn-primary ms-radius">查询</button>
          </form>
        </div>

        <div class="ms-g">
            <p class="title">学校耗电同比分析</p>
            <div id="year"></div>
        </div>
      </div>
    </div>

    <div class="ms-tabs-bd ms-tabs-bd-ofv">
      <div class="ms-tab-panel ms-fade" id="tab2">

        <div class="ms-g">
          <div >
            <p class="sys-choose">区域：
              <select data-ms-selected>
                <option value="a" selected>图书馆</option>
                <option value="b">宿舍区1</option>
                <option value="d">宿舍区2</option>
                <option value="o">办公区</option>
                <option value="m">实验室</option>
              </select>
              楼层 ：
              <select data-ms-selected>
                <option value="a" selected>A1</option>
                <option value="b">A2</option>
                <option value="c">A3</option>
                <option value="d">A4</option>
                <option value="a">A5</option>
                <option value="b">A6</option>
                <option value="c">A7</option>
                <option value="d">A8</option>
              </select>
              房间 ：
              <select data-ms-selected>
                <option value="a" selected>A1-101</option>
                <option value="b" >A1-102</option>
                <option value="c">A1-103</option>
                <option value="d">A1-104</option>
                <option value="a">A1-105</option>
                <option value="b">A1-106</option>
                <option value="c">A1-107</option>
                <option value="d">A1-108</option>
              </select>
            </p>
          </div>

        </div>

        <div class="time">
          <form action="" class="ms-form ms-form-inline ">
            时间段：
            <div class="ms-form-group ms-form-icon ">
              <i class="ms-icon-calendar"></i>
              <input type="text" class="ms-form-field ms-datepicker-date" placeholder="始">
            </div>
            <div class="ms-form-group ms-form-icon ">
              <i class="ms-icon-calendar"></i>
              <input type="text" class="ms-form-field ms-datepicker-date" placeholder="终">
            </div>
            <button type="button" class="ms-btn ms-btn-primary ms-radius">查询</button>
          </form>
        </div>

      <div class="ms-g">
        <div class="ms-u-sm-8">
          <p class="title"> 学校整体耗电分析</p>
          <div id="compare"></div>
        </div>
        <div class="ms-u-sm-4">
          <p class="title">耗电排名</p>
          <div class="ms-tabs" data-ms-tabs >
            <ul class="ms-tabs-nav ms-nav ms-nav-tabs">
              <li class="ms-active"><a href="#lighting">照明系统</a></li>
              <li><a href="#air">空调系统</a></li>
            </ul>

            <div class="ms-tabs-bd ms-tabs-bd-ofv" >
              <div class="ms-tab-panel ms-fade ms-in ms-active" id="lighting">

                <table class="ms-table ms-table-striped ms-table-hover ms-table-compact">
                  <tbody>
                  <tr>
                    <td>NO.1</td>
                    <td>图书馆</td>
                    <td>5826</td>
                  </tr>
                  <tr>
                    <td>NO.2</td>
                    <td>宿舍楼1</td>
                    <td>4528</td>
                  </tr>
                  <tr>
                    <td>NO.3</td>
                    <td>办公楼</td>
                    <td>4425</td>
                  </tr>
                  <tr>
                    <td>NO.4</td>
                    <td>宿舍楼2</td>
                    <td>4129</td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <div class="ms-tabs-bd ms-tabs-bd-ofv">
              <div class="ms-tab-panel ms-fade" id="air">
                <table  class="ms-table ms-table-striped ms-table-hover ms-table-compact">
                  <tbody>
                  <tr>
                    <td>NO.1</td>
                    <td>实验室</td>
                    <td>5129</td>
                  </tr>
                  <tr>
                    <td>NO.2</td>
                    <td>图书馆</td>
                    <td>4529</td>
                  </tr>
                  <tr>
                    <td>NO.3</td>
                    <td>宿舍楼1</td>
                    <td>4230</td>
                  </tr>
                  <tr>
                    <td>NO.4</td>
                    <td>宿舍楼2</td>
                    <td>4121</td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>

          </div>
        </div>

      </div>

      <p class="title">各区域耗电概览</p>
      <hr>
      <div class="ms-g">
        <div class="ms-u-sm-3">
          <div id="library-analysis"></div>
          <p class="label"> 图书馆</p>
        </div>

        <div class="ms-u-sm-3" >
          <div id="dorm1-analysis"></div>
          <p class="label"> 宿舍楼1</p>
        </div>

        <div class="ms-u-sm-3" >
          <div id="dorm2-analysis"></div>
          <p class="label"> 宿舍楼2</p>
        </div>
        <div class="ms-u-sm-3" >
          <div id="office-analysis"></div>
          <p class="label"> 办公楼</p>
        </div>
      </div>
      <br>

      <br>
      </div>
    </div>

    <div class="ms-tabs-bd ms-tabs-bd-ofv">
      <div class="ms-tab-panel ms-fade" id="tab3">

        <div class="ms-g">
          <div >
            <p class="sys-choose">系统：
              <select id="js-selected" data-ms-selected>
                <option value="a" selected>照明系统</option>
                <option value="b">空调系统</option>
              </select>
            </p>
            <div id="js-selected-info"></div>
          </div>

        </div>

        <div class="time">
          <form action="" class="ms-form ms-form-inline ">
            时间段：
            <div class="ms-form-group ms-form-icon ">
              <i class="ms-icon-calendar"></i>
              <input type="text" class="ms-form-field ms-datepicker-date" placeholder="始">
            </div>
            <div class="ms-form-group ms-form-icon ">
              <i class="ms-icon-calendar"></i>
              <input type="text" class="ms-form-field ms-datepicker-date" placeholder="终">
            </div>
            <button type="button" class="ms-btn ms-btn-primary ms-radius">查询</button>
          </form>
        </div>

        <div class="ms-g">
          <div id="lighting-compare"></div>

        </div>



      </div>
    </div>

    <div class="ms-tabs-bd ms-tabs-bd-ofv">
      <div class="ms-tab-panel ms-fade" id="tab4">

        <div class="ms-g">
          <div >
            <p class="sys-choose">系统：
              <select data-ms-selected>
                <option value="a" selected>照明系统</option>
                <option value="b">空调系统</option>
              </select>
              区域：
              <select data-ms-selected>
                <option value="a" selected>图书馆</option>
                <option value="b">宿舍楼1</option>
                <option value="b">宿舍楼2</option>
                <option value="b">办公楼</option>
              </select>

            </p>
          </div>

        </div>

        <div class="time">
          <form action="" class="ms-form ms-form-inline ">
            时间段：
            <div class="ms-form-group ms-form-icon ">
              <i class="ms-icon-calendar"></i>
              <input type="text" class="ms-form-field ms-datepicker-date" placeholder="始">
            </div>
            <div class="ms-form-group ms-form-icon ">
              <i class="ms-icon-calendar"></i>
              <input type="text" class="ms-form-field ms-datepicker-date" placeholder="终">
            </div>
            <button type="button" class="ms-btn ms-btn-primary ms-radius">查询</button>
          </form>
        </div>

        <div class="ms-g">
          <p class="title">照明系统单位面积能耗</p>
          <div class="ms-u-sm-2">
            <p class="comment">蓝色标线表示同类图书馆单位面积耗电量的平均值</p>
          </div>
          <div class="ms-u-sm-10">
            <div id="lighting-efficiency"></div>
          </div>


        </div>



      </div>
    </div>

  </div>
</div>
</body>

</html>